<template>
  <div class="wrap">
    <!-- head -->
    <div class="head_wrap">
      <!--搜索栏-->
      <div
        class="search_wrap"
        v-if="
          (menuType === 1 && airline_schedule_select_auth) ||
          (menuType === 2 && airline_schedule_select_airline_auth)
        "
      >
        <!-- v-if="airline_schedule_select_auth" -->
        <el-autocomplete
          v-model="inputSearchWord"
          popper-class="input-with-select"
          placeholder="请输入搜索内容"
          :fetch-suggestions="historySearch"
          @select="handleSelectHistory"
          @keyup.enter.native="searchWord()"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchWord()"
          />
          <template slot-scope="{ item }" popper-class="input-with-select">
            <div class="flex_row historyItem">
              <svg-icon class="history-icon" icon-class="history" />
              <div class="history-text">{{ item }}</div>
            </div>
          </template>
        </el-autocomplete>
        <el-button
          class="refresh"
          icon="el-icon-refresh-right"
          @click="refresh()"
        />
      </div>
      <!--目录选择器-->
      <div class="menu_wrap">
        <div
          class="menu_item"
          :class="menuType === 1 ? 'menu_selected' : 'menu_unselected'"
          @click="setMenuType(1)"
        >
          <svg-icon class="menu_icon" icon-class="schedule" />
          <div class="menu_name">任务计划</div>
        </div>
        <span class="menu_line" />
        <div
          class="menu_item"
          :class="menuType === 2 ? 'menu_selected' : 'menu_unselected'"
          @click="setMenuType(2)"
        >
          <svg-icon class="menu_icon" icon-class="flight" />
          <div class="menu_name">航线列表</div>
        </div>
      </div>
    </div>
    <!-- list -->
    <div class="content_wrap">
      <!--列表里1：任务计划列表-->
      <div
        v-if="menuType === 1"
        style="flex: 1; overflow-y: auto"
        @scroll="handleScheduleScroll"
      >
        <div
          v-if="!loadingPastSchedule && scheduleList.length === 0"
          style="margin-top: 60px"
        >
          暂无数据
        </div>
        <div
          v-for="(item_schedule, index_schedule) in scheduleList"
          v-show="menuType === 1"
          :key="index_schedule"
        >
          <div class="item_schedule">
            <div
              v-if="
                item_schedule.scheduleList &&
                item_schedule.scheduleList.length > 0
              "
              class="title"
            >
              <span class="title_text">{{
                item_schedule.scheduleDateTitle
              }}</span>
              <span class="title_date">{{ item_schedule.scheduleDate }}</span>
            </div>
            <div
              v-for="(flight, index) in item_schedule.scheduleList"
              :key="index"
            >
              <div
                v-if="flight.state === '已经飞行'"
                :id="flight.flight_record"
                class="mission_list flex_row"
              >
                <!--时间:有4种样式-->
                <div
                  class="mission_time flex_column"
                  :class="flight.showTimeStyle"
                >
                  <span style="font-size: 18px; font-weight: bold"
                    >{{ flight.showTime }}
                    <span
                      v-if="flight.showTime !== '--:--'"
                      style="font-size: 14px; margin-left: -5px"
                      >: {{ flight.time.substring(14, 16) }}
                    </span>
                  </span>
                  <div style="font-size: 12px">{{ flight.state }}</div>
                </div>
                <!--进度条:有3种样式-->
                <div class="mission_icon flex_column">
                  <div
                    v-if="flight.state === '等待飞行'"
                    class="circle orange"
                    :class="[index === 0 ? 'icon_top' : 'icon_normal']"
                  />
                  <svg-icon
                    v-else-if="flight.state === '正在飞行'"
                    class="icon"
                    style="cursor: pointer"
                    icon-class="flight-progress"
                    :class="[index === 0 ? 'icon_top' : 'icon_normal']"
                    @click="gotoNestComp(flight)"
                  />
                  <div
                    v-else
                    class="circle grey"
                    :class="[index === 0 ? 'icon_top' : 'icon_normal']"
                  />
                  <div class="line" />
                </div>
                <!--内容:有4种样式-->
                <div
                  class="mission_content flex_column"
                  :class="[
                    flight.state === '正在飞行' ? 'mission_working' : '',
                    flight.showAirline ? 'mission_selected' : '',
                  ]"
                  @click="clickSchedule(flight)"
                >
                  <div class="flex_row" style="justify-content: space-between">
                    <span class="mission_title" :class="flight.itemStyle">{{
                      flight.name
                    }}</span>
                    <svg-icon
                      v-if="
                        flight.state === '已经飞行' &&
                        airline_schedule_check_video_auth
                      "
                      style="width: 20px; height: 20px"
                      icon-class="video_play"
                      @click.stop="showRecordVideo(flight)"
                    />
                  </div>
                  <div
                    v-if="flight.state !== '取消飞行'"
                    class="mission_address"
                  >
                    {{ flight.nest_name }}
                  </div>
                  <div
                    v-if="flight.state === '已经飞行'"
                    class="mission_info flex_row"
                  >
                    <div class="flex_row mission_info_item">
                      <svg-icon
                        class="mission_info_icon"
                        icon-class="gallery-fill"
                      />
                      <div class="mission_info_title">照片数</div>
                      <div class="mission_info_num">
                        {{ flight.photos ? flight.photos : "0" }}
                      </div>
                    </div>
                    <div class="flex_row mission_info_item">
                      <svg-icon
                        class="mission_info_icon"
                        icon-class="alert-fill"
                      />
                      <div class="mission_info_title">预警数</div>
                      <div class="mission_info_num" style="color: darkorange">
                        {{ flight.issues ? flight.issues : "0" }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="mission_list flex_row">
                <!--时间:有4种样式-->
                <div
                  class="mission_time flex_column"
                  :class="flight.showTimeStyle"
                >
                  <span style="font-size: 18px; font-weight: bold"
                    >{{ flight.showTime }}
                    <span
                      v-if="flight.showTime !== '--:--'"
                      style="font-size: 14px; margin-left: -5px"
                      >: {{ flight.time.substring(14, 16) }}
                    </span>
                  </span>
                  <div style="font-size: 12px">
                    {{
                      flight.state === "等待飞行" ? "计划飞行" : flight.state
                    }}
                  </div>
                </div>
                <!--进度条:有3种样式-->
                <div class="mission_icon flex_column">
                  <div
                    v-if="flight.state === '等待飞行'"
                    class="circle orange"
                    :class="[index === 0 ? 'icon_top' : 'icon_normal']"
                  />
                  <svg-icon
                    v-else-if="flight.state === '正在飞行'"
                    class="icon"
                    style="cursor: pointer"
                    icon-class="flight-progress"
                    :class="[index === 0 ? 'icon_top' : 'icon_normal']"
                    @click="gotoNestComp(flight)"
                  />
                  <div
                    v-else
                    class="circle grey"
                    :class="[index === 0 ? 'icon_top' : 'icon_normal']"
                  />
                  <div class="line" />
                </div>
                <!--内容:有4种样式-->
                <div
                  class="mission_content flex_column"
                  :class="[
                    flight.state === '正在飞行' ? 'mission_working' : '',
                    flight.showAirline ? 'mission_selected' : '',
                  ]"
                  @click="clickSchedule(flight)"
                >
                  <div class="flex_row" style="justify-content: space-between">
                    <span class="mission_title" :class="flight.itemStyle">{{
                      flight.name
                    }}</span>
                    <svg-icon
                      v-if="
                        flight.state === '已经飞行' &&
                        airline_schedule_check_video_auth
                      "
                      style="width: 20px; height: 20px"
                      icon-class="video_play"
                      @click.stop="showRecordVideo(flight)"
                    />
                  </div>
                  <div
                    v-if="flight.state !== '取消飞行'"
                    class="mission_address"
                  >
                    {{ flight.nest_name }}
                  </div>
                  <div
                    v-if="flight.state === '已经飞行'"
                    class="mission_info flex_row"
                  >
                    <div class="flex_row mission_info_item">
                      <svg-icon
                        class="mission_info_icon"
                        icon-class="gallery-fill"
                      />
                      <div class="mission_info_title">照片数</div>
                      <div class="mission_info_num">
                        {{ flight.photos ? flight.photos : "0" }}
                      </div>
                    </div>
                    <div class="flex_row mission_info_item">
                      <svg-icon
                        class="mission_info_icon"
                        icon-class="alert-fill"
                      />
                      <div class="mission_info_title">预警数</div>
                      <div class="mission_info_num" style="color: darkorange">
                        {{ flight.issues ? flight.issues : "0" }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <!--列表里1：图片信息-->
        <move-box
          ref="moveBox3"
          :box-top="177"
          :box-right="360"
          :box-width="560"
          :box-height="450"
          style="z-index: 2"
          :box-scale="true"
          @closePhoto="closePhoto"
        >
          <!--图片展示-->
          <div ref="ref_container2" class="container">
            <!--图片内容-->
            <issue-viewer
              canvas-name="canvas3"
              v-if="showIssueViewer"
              :url2="selectPhoto.out_url"
              :show-zoom-tool="false"
              style="height: 100%; width: 100%; position: relative"
            />
            <!--上一页下一页-->
            <div class="leftbtn" @click="previousPhoto">
              <svg-icon icon-class="previous" />
            </div>
            <div class="rightbtn" @click="nextPhoto">
              <svg-icon icon-class="next" />
            </div>
            <!-- 照片信息 -->
            <div class="photo_info">
              <div>
                拍摄时间：{{ selectPhoto ? selectPhoto.photo_time : "" }}
              </div>
              <div>经 度：{{ selectPhoto ? selectPhoto.lng : "" }}</div>
              <div>
                拍摄航线：{{ selectPhoto ? selectPhoto.airline_name : "" }}
              </div>
              <div>纬 度：{{ selectPhoto ? selectPhoto.lat : "" }}</div>
            </div>
          </div>
        </move-box>
        <!--列表里1：视频回放-->
        <move-box
          ref="videoBox"
          :box-top="170"
          :box-right="360"
          :box-width="560"
          :box-height="420"
          style="z-index: 2"
          @closePhoto="closeVideo"
        >
          <div class="container" style="height: 100%; width: 100%">
            <!-- <div id="recordVideo" style="height: 420px;width: 560px"> -->
            <!-- </div> -->
            <video
              muted="muted"
              id="recordVideoA"
              style="height: 420px; width: 560px"
              :src="downVideoUrl"
              type="video/mp4"
              autoplay="autoplay"
              controls="controls"
              loop="-1"
              :controlslist="controlslist"
            >
              <p>你的浏览器不支持video标签.</p>
            </video>
            <!-- <div id="downloadvideo" @click="downloadVideo">下载</div> -->
            <div
              class="videoText"
              v-if="!videoNowTime.includes('Invalid date')"
            >
              {{ videoNowTime }}
              <el-tooltip
                class="item"
                effect="dark"
                :content="
                  tipsShow
                    ? '该视频录制不完整，误差较大'
                    : '此为预估时间，可能存在偏差'
                "
                placement="bottom"
                :visible-arrow="true"
              >
                <div class="flag">i</div>
              </el-tooltip>
            </div>
          </div>
        </move-box>
      </div>

      <!--列表里2-->
      <div
        v-if="menuType === 2"
        class="order_type"
        style="justify-content: space-between"
      >
        <el-select
          v-model="filterNest"
          style="width: 90px"
          :clearable="true"
          value-key="nest_code"
          :title="filterNest ? filterNest.nest_name : ''"
          @change="userNestChange"
        >
          <el-option
            v-for="item in nestList"
            :key="item.nest_code"
            :label="item.nest_name"
            :value="item"
          />
        </el-select>
        <el-select
          v-model="filterUserType"
          style="width: 90px; margin-left: 10px"
          :clearable="true"
          @change="userTypeChange"
        >
          <el-option
            v-for="item in UseTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div style="flex: 1" />
        <div
          v-if="false"
          class="flex_row order_item"
          @click="reversOrderType1()"
        >
          <span class="order_text">下次飞行顺序</span>
          <svg-icon
            v-if="orderType1 === 0"
            class="svg_icon"
            icon-class="sort-down"
          />
          <svg-icon
            v-if="orderType1 === 1"
            class="svg_icon"
            icon-class="sort-up"
          />
        </div>
        <div
          class="flex_row order_item"
          style="margin-left: 0px"
          title="按累计架次排序"
          @click="reversOrderType2()"
        >
          <svg-icon
            v-if="orderType2 === -1"
            class="svg_icon"
            icon-class="sort-down"
          />
          <svg-icon
            v-if="orderType2 === 1"
            class="svg_icon"
            icon-class="sort-up"
          />
        </div>
        <div
          class="flex_row order_item"
          style="margin-left: 0px"
          :title="allAirlineVisible ? '显示航线' : '隐藏航线'"
          @click="reversAirlineVisible()"
          v-if="airline_schedule_check_airline_auth"
        >
          <svg-icon
            v-if="allAirlineVisible"
            class="svg_icon"
            icon-class="visible"
          />
          <svg-icon v-else class="svg_icon" icon-class="invisible" />
        </div>
      </div>
      <!--列表里2：航线列表-内容-->
      <div
        v-if="menuType === 2"
        style="flex: 1; overflow-y: auto"
        @scroll="handleAirlineScroll"
      >
        <div
          v-if="!loadingAirlineList && airlineList.length === 0"
          style="margin-top: 60px"
        >
          暂无数据
        </div>
        <div v-for="(airline, index) in airlineList" :key="index">
          <div
            :id="airline.airline_code"
            class="item2"
            @click="showHideFlightOnMap(airline, true)"
          >
            <!--航线名称-->
            <div class="flex_row" style="margin-top: 10px; padding: 0 4px">
              <div class="title single_line" :title="airline.airline_name">
                航线名称：{{ airline.airline_name }}
              </div>
              <span v-if="airline_schedule_check_airline_auth">
                <svg-icon
                  v-if="!airline.showAirline"
                  class="svg_icon"
                  icon-class="invisible"
                />
                <svg-icon v-else class="svg_icon" icon-class="visible" />
              </span>
              <!--编辑弹窗-->
              <el-popover
                ref="popoverNameRef"
                placement="bottom"
                trigger="click"
                width="400"
                popper-class="mytooltip2"
              >
                <el-input
                  v-model="inputAirlineName"
                  placeholder="请输入新的航线名称"
                  class="input-with-select"
                >
                  <el-button
                    slot="append"
                    @click="renameAirline(airline, index)"
                    >确定
                  </el-button>
                </el-input>
                <el-button
                  slot="reference"
                  style="
                    padding: 0;
                    margin: 0;
                    border: none;
                    background: rgba(255, 255, 255, 0);
                  "
                  @click.stop="setAirlineName(airline)"
                  v-if="airline_schedule_edit_record_name_auth"
                >
                  <svg-icon class="svg_icon" icon-class="edit" />
                </el-button>
              </el-popover>
            </div>
            <!--基站和架次-->
            <div class="flex_row" style="margin-top: 10px; padding: 0 4px">
              <div
                class="single_line"
                style="flex: 3; text-align: start"
                :title="airline.nest_name"
              >
                所属基站：<span class="num single_line">{{
                  airline.nest_name
                }}</span>
              </div>
              <div style="flex: 2; text-align: start; margin-left: 5px">
                累计架次：<span class="num">{{ airline.flight_sorties }}</span
                >次
              </div>
            </div>
            <!--类型和照片-->
            <div class="flex_row" style="margin-top: 10px; padding: 0 4px">
              <div style="flex: 3; text-align: start">
                航线类型： <span class="num">{{ airline.airline_type }}</span>
              </div>
              <div style="flex: 2; text-align: start; margin-left: 5px">
                累计照片：<span class="num">{{ airline.photos }}</span
                >张
              </div>
            </div>
            <!--排期规则-->
            <div class="flex_row rule_wrap" @click.stop="">
              <div style="margin-top: 2px">排期规则：</div>
              <div style="flex: 1; margin-left: 10px">
                <div
                  class="flex_row"
                  style="
                    justify-content: flex-start;
                    align-items: center;
                    margin: 0 0 10px 0;
                  "
                >
                  <div class="rule_type">{{ airline | getRuleText }}</div>
                </div>
              </div>
              <el-switch
                v-if="airline_schedule_edit_airline_schedule_auth"
                v-model="airline.schedule_state"
                active-color="#13ce66"
                inactive-color="#999999"
                :title="airline.schedule_state ? '参与排期' : '不参与排期'"
                @change="changeStatus($event, airline)"
              />
              <el-popover
                v-if="false"
                ref="popoverRef"
                placement="bottom"
                trigger="click"
                popper-class="mytooltip"
                :visible-arrow="false"
              >
                <el-table
                  :data="gridData"
                  :header-cell-style="{
                    background: 'rgba(6, 82, 121,0.8)',
                    color: 'white',
                  }"
                  :row-style="{ background: 'rgb(6, 82, 121)', color: 'white' }"
                >
                  <el-table-column
                    width="50"
                    property="id"
                    label="序号"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div v-if="scope.row.edit">{{ scope.row.id }}</div>
                      <div v-else>{{ scope.row.id }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="type"
                    label="排期方式"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div v-if="scope.row.edit">
                        <el-select v-model="ruleType" @change="changeRuleType">
                          <el-option
                            v-for="item in ScheduleTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </div>
                      <div v-else>{{ scope.row.type }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="type"
                    label="航线用途"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div v-if="scope.row.edit">
                        <el-select v-model="useType">
                          <el-option
                            v-for="item in UseTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </div>
                      <div v-else>{{ scope.row.type }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="250"
                    property="rule"
                    label="排期规则"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div v-if="scope.row.edit">
                        <div v-if="ruleType === 1" class="flex_row">
                          <el-select
                            v-model="loopUnit"
                            style="width: 70px"
                            small
                          >
                            <el-option
                              v-for="item in DateTypeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            />
                          </el-select>
                          <el-input-number
                            v-model="loopNum"
                            size="small"
                            :min="1"
                          />
                        </div>
                        <div v-if="ruleType === 2">
                          <el-date-picker
                            v-model="loopDate"
                            :picker-options="expireTimeOption"
                            teleported="false"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime"
                            placeholder="选择日期时间"
                            style="width: 180px"
                          />
                        </div>
                      </div>
                      <div v-else>{{ scope.row.rule }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="false"
                    width="200"
                    property="time"
                    label="巡检时段"
                  >
                    <template slot-scope="scope">
                      <div v-if="scope.row.edit">
                        <el-time-picker
                          v-model="edit"
                          is-range
                          format="HH:mm"
                          value-format="HH:mm"
                          size="mini"
                          style="width: 180px"
                          range-separator="至"
                          start-placeholder="开始"
                          end-placeholder="结束"
                          placeholder="选择范围"
                        />
                      </div>
                      <div v-else>{{ scope.row.time }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="150"
                    property="action"
                    label="操作"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div class="flex_row">
                        <el-switch
                          v-if="false"
                          v-model="switchValue"
                          active-color="#13ce66"
                          inactive-color="#999999"
                        />
                        <svg-icon
                          v-if="false"
                          icon-class="add"
                          class="svg_icon"
                          style="margin-left: 10px"
                        />
                        <el-button
                          v-if="scope.row.edit"
                          class="button"
                          @click="saveRule(airline, index)"
                          >修改
                        </el-button>
                        <el-button
                          v-if="scope.row.edit"
                          class="button"
                          style="margin-left: 15px"
                          @click="closeRuleEdit(index)"
                        >
                          退出
                        </el-button>
                        <svg-icon
                          v-if="!scope.row.edit"
                          icon-class="edit"
                          class="svg_icon"
                          style="margin-left: 10px"
                        />
                        <svg-icon
                          v-if="!scope.row.edit"
                          icon-class="delete"
                          class="svg_icon"
                          style="width: 18px; height: 18px"
                        />
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button
                  slot="reference"
                  style="
                    padding: 0;
                    margin: 0;
                    border: none;
                    background: rgba(255, 255, 255, 0);
                  "
                  @click="setPopoverData(airline)"
                >
                  <svg-icon class="svg_icon" icon-class="schedule_box" />
                </el-button>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAirlineList,
  getFlightDetail,
  getPastFlightSchedule,
  getRecordVideo,
  getPhotoShadow,
  getTodayFlightSchedule,
  updateAirline,
  getFlightTrack,
} from "@/api/kanban";
import MoveBox from "../boxComps/moveBox.vue";
import ImgBox from "../boxComps/imgBox.vue";
import IssueViewer from "@/views/components/tab-views/baseComps/IssueViewer";
import moment from "moment";

let aircraftDataSource = null; // 飞机图层
var MyPlane = null;
var videoInterval = null;
let flyAirlineDataSource = null;
let photoShape = []; // 地图：照片
let recordShape = ""; // 地图：飞行轨迹
let scheduleShape = ""; //  地图：航线
let shadowShape = ""; //  地图：照片投影
//
let scheduleDrawIssues = []; // 某次任务的问题
var loopRequest = "";
export default {
  components: {
    IssueViewer,
    MoveBox,
    ImgBox,
  },
  filters: {
    /**
     * 设置排期规则
     */
    getRuleText(airline) {
      if (!airline.schedule_state) {
        return "不参与排期";
      } else {
        return airline.schedule_type;
      }
      // else if (airline.schedule_type === "默认自动排期") {
      //   return airline.schedule_type;
      // } else if (airline.schedule_type === "单次") {
      //   return airline.schedule_type + " | " + airline.schedule_cycle;
      // } else if (airline.schedule_type === "循环") {
      //   return airline.schedule_type + " | " + airline.schedule_cycle;
      // }
    },
  },
  computed: {
    // 权限
    // 航线排期 飞行记录搜索
    airline_schedule_select_auth() {
      return this.userAuthor?.airline_schedule?.select?.have_auth;
    },
    // 航线排期 飞行照片下载
    airline_schedule_download_pic_auth() {
      return this.userAuthor?.airline_schedule?.download_pic?.have_auth;
    },
    // 航线排期 照片查看
    airline_schedule_check_pic_auth() {
      return this.userAuthor?.airline_schedule?.check_pic?.have_auth;
    },
    // 航线排期 飞行视频查看
    airline_schedule_check_video_auth() {
      return this.userAuthor?.airline_schedule?.check_video?.have_auth;
    },
    // 航线排期 预警信息查看
    airline_schedule_check_warning_auth() {
      return this.userAuthor?.airline_schedule?.check_warning?.have_auth;
    },
    // 航线排期 航线列表搜索
    airline_schedule_select_airline_auth() {
      return this.userAuthor?.airline_schedule?.select_airline?.have_auth;
    },
    // 航线排期 航线详情查看
    airline_schedule_check_airline_auth() {
      return this.userAuthor?.airline_schedule?.check_airline?.have_auth;
    },
    // 航线排期 修改航行名称
    airline_schedule_edit_record_name_auth() {
      return this.userAuthor?.airline_schedule?.edit_record_name?.have_auth;
    },
    // 航线排期 修改航线排期
    airline_schedule_edit_airline_schedule_auth() {
      return this.userAuthor?.airline_schedule?.edit_airline_schedule
        ?.have_auth;
    },
    // 航线排期 修改航线场景
    airline_schedule_edit_airline_scene_auth() {
      return this.userAuthor?.airline_schedule?.edit_airline_scene?.have_auth;
    },
    // 视频下载按钮控制
    controlslist() {
      return this.userAuthor?.airline_schedule?.download_video?.have_auth
        ? ""
        : "nodownload";
    },
  },
  data() {
    return {
      aliplayer: "",
      //
      inputSearchWord: "", // 搜索
      menuType: 1, // 菜单：任务计划；航线列表
      nestIds: "",
      nestList: [],
      /**
       * 计划列表
       */
      scheduleList: [],
      scheduleSelected: null,
      scheduleParams: {
        name: "",
        nest_ids: "",
        page: 1,
        page_size: 30,
        //
        totalPages: 0,
        dept_id: this.$store.getters.deptId,
      },
      loadingPastSchedule: false,
      scheduleScrollTop: 0,
      mapClickHandler: "", // 地图点击事件
      photoList: [], // 照片列表
      photoIndex: 0, // 选中照片序号
      selectPhoto: {
        // "airline_name": "【全覆盖】常山09-球川基站B08",
        // "alt": 316.160217,
        // "lat": 28.8323989,
        // "lng": 118.3618801,
        // "out_url": "http://fsimage.guihuao.com/541f20ab-cc95-46d6-8838-56dde08a102a/4848072141830098945.JPG",
        // "photo_id": "4848072141830098945",
        // "photo_time": "2024-01-25 10:46:18",
        // "photo_type": 0,
        // "id": "52e4a9a5-3fab-44f5-b4a4-4fe58ea920af"
      }, // 选中的照片
      /**
       * 航线列表
       */
      inputAirlineName: null,
      filterUserType: null,
      filterNest: null,
      orderType1: 0,
      orderType2: -1, // 按累计架次排序
      allAirlineVisible: false,
      gridData: [
        // { id: '1', type: '循环', rule: '每周1', time: '09:00-10:00', action: '' },
        // { id: '5', type: '循环', rule: '每周1,3,5,7', time: '09:00-10:00', action: '' },
        {
          edit: true,
          id: "-",
          type: "循环",
          rule: "每周1,3,5,7",
          time: "09:00-10:00",
          action: "",
        },
      ],
      airlineList: [],
      airlineParams: {
        name: "",
        nest_ids: "",
        page: 1,
        useType: 0,
        page_size: 20,
        sort_field: "flight_sorties",
        sort_type: -1, // 1 和 -1
        //
        totalPages: 0,
        dept_id: this.$store.getters.deptId,
      },
      loadingAirlineList: false,
      airlineScrollTop: 0,
      //
      ScheduleTypeList: [
        {
          value: 0,
          label: "默认",
        },
        {
          value: 1,
          label: "周期",
        },
        {
          value: 2,
          label: "临时",
        },
      ],
      UseTypeList: [
        {
          value: 1,
          label: "取证采样",
        },
        {
          value: 2,
          label: "直播",
        },
        {
          value: 3,
          label: "全覆盖",
        },
        {
          value: 4,
          label: "全景制作",
        },
        {
          value: 5,
          label: "正射制作",
        },
        {
          value: 6,
          label: "三维制作",
        },
      ],
      DateTypeList: [
        {
          value: 1,
          label: "每天",
        },
        {
          value: 2,
          label: "每周",
        },
        {
          value: 3,
          label: "每月",
        },
      ],
      //
      ruleType: 0, // 排期方式
      useType: 1, // 航线类型
      loopUnit: 1, // 周期单位
      loopNum: 0, // 周期次数
      loopDate: "", // 临时日期
      //
      expireTimeOption: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      switchValue: false,
      initValue: null,

      downVideoUrl: null,

      userAuthor: null,
      //
      maxSize: ["80px", "300px"],
      imgBoxSize: ["560", "420"],
      showIssueViewer: false,
      videoStartTime: "",
      videoCurrentTime: "",
      videoNowTime: "",
      aircraftSocketInfo: {},
      endTime: "", // 降落时间
      startTime: "", // 起飞时间
      tipsShow: false, // 时间偏差过大的提示
      videoMoveFlag: false, // 视频是否打开
      points: [], // 航线信息
    };
  },
  created() {
    this.userAuthor = this.$store.getters.userAuth;
    const storeValue = sessionStorage.getItem("view3SelectedData");
    if (storeValue) {
      this.initValue = JSON.parse(storeValue);
      this.menuType = this.initValue.menuIndex;
      if (this.initValue.menuIndex) {
        this.menuType = this.initValue.menuIndex;
      }
      if (this.initValue.lastInput) {
        this.inputSearchWord = this.initValue.lastInput;
      }
    }
  },
  mounted() {
    this.initData();
  },
  beforeDestroy() {
    // description 离开该模块时关闭图层
    this.$bus.off("hiddenLeftKanban");
    this.$bus.off("showLeftKanban");
    this.$bus.off("hiddenIssue");
    this.$bus.emit("toggleNestLayer", true);
    this.$bus.emit("toggleIssueLayer", true);
    if (loopRequest) {
      window.clearInterval(loopRequest);
    }
    const selectedAirline = this.airlineList.filter((item) => {
      return item.showAirline;
    });

    const storeValue = {
      menuIndex: this.menuType,
      scheduleSelected: this.scheduleSelected,
      airlineSelectedArray: selectedAirline,
      scheduleList: this.scheduleList,
      airlineList: this.airlineList,
      cameraInfo: this.getCameraInfo(),
      lastInput: this.inputSearchWord,
    };
    sessionStorage.setItem("view3SelectedData", JSON.stringify(storeValue));
    this.clearMap();
    this.destroyMap();
  },
  methods: {
    initData() {
      // description 进入该模块时关闭图层
      this.iniMap();
      this.initParams();
      // this.requestTodaySchedule()
      // this.requestPastSchedule()

      // 10秒更新一次计划列表
      loopRequest = setInterval(() => {
        this.requestTodaySchedule();
      }, 10 * 1000);

      this.initScheduleData();
      this.initAirlineData();
      this.initBusEvent();
      this.initPhotoHandler();
    },
    // 点击卡片 active+自动定位+显示航线
    // 点击播放按钮 active+自动定位+显示航线+显示视频
    /**
     *  地图初始化和点击事件---------------------------------------
     */
    iniMap() {
      if (!aircraftDataSource) {
        aircraftDataSource = CesiumUtil.CreateLayer("aircraftDataSource");
        aircraftDataSource.show = false;
      }
      aircraftDataSource.entities.removeAll();

      if (!flyAirlineDataSource) {
        flyAirlineDataSource = CesiumUtil.CreateLayer("flyAirlineDataSource");
        flyAirlineDataSource.show = false;
      }
      flyAirlineDataSource.entities.removeAll();
      //
    },
    destroyMap() {
      this.removePhotoHandler();
      if (aircraftDataSource) {
        aircraftDataSource.entities.removeAll();
        aircraftDataSource.show = false;
        aircraftDataSource = null;
      }

      if (flyAirlineDataSource) {
        flyAirlineDataSource.entities.removeAll();
        flyAirlineDataSource.show = false;
        flyAirlineDataSource = null;
      }
    },
    // 清空地图及相关数据
    clearMap() {
      console.log("clearMap");
      scheduleDrawIssues = [];
      this.airlineList.forEach((item) => {
        item.showAirline = false;
      });
      this.scheduleList.forEach((item) => {
        item.scheduleList.forEach((item) => {
          item.showAirline = false;
        });
      });
      this.$refs.moveBox3.toggleShow(false);
      this.$refs.videoBox.toggleShow(false);
      this.showIssueViewer = false;
      if (flyAirlineDataSource) {
        flyAirlineDataSource.entities.removeAll();
        flyAirlineDataSource.show = false;
      }
      this.photoList = []; // 照片列表
      this.photoIndex = 0; // 选中照片序号
      this.selectPhoto = ""; // 选中的照片
      photoShape = []; // 地图：照片
      recordShape = ""; // 地图：飞行轨迹
      scheduleShape = ""; //  地图：航线
      shadowShape = "";
    },
    // 注册地图照片点击事件
    initPhotoHandler() {
      const that = this;
      this.mapClickHandler = new Cesium.ScreenSpaceEventHandler(
        viewer.scene.canvas
      );
      this.mapClickHandler.setInputAction(function (e) {
        // alert('左键单击事件：' + e.position)
        that.handleEntityClick(e);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    // 注销地图照片点击事件
    removePhotoHandler() {
      if (this.mapClickHandler) {
        this.mapClickHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        ); // 移除事件
      }
    },
    /**
     *  图片操作---------------------------------------
     */
    //  ‘照片’ 点击事件
    handleEntityClick(e) {
      const obj = CesiumUtil.LeftClick(e);
      if (obj.pick && obj.pick.id && obj.pick.id._type === "photo") {
        console.log("obj.pick.id", obj.pick.id);
        // 更新照片,呼出控件
        this.photoList.forEach((item, index) => {
          if (item.id === obj.pick.id.id) {
            this.photoIndex = index;
            this.openPhoto(index);
          }
        });
      }
    },
    requestShadowById(photoId) {
      getPhotoShadow({
        photo_id: photoId,
      }).then((res) => {
        if (
          res.data &&
          res.data.location &&
          res.data.location.type === "Polygon"
        ) {
          this.drawPhotoShadow(res.data.location.coordinates[0]);
        }
      });
    },
    drawPhotoShadow(pointList) {
      var arr2 = pointList.reduce(function (a, b) {
        return a.concat(b);
      });
      var polygon = {
        type: "photo_view",
        positions: arr2,
        clamp: true,
        color: "rgba(255, 255, 0, 0.3)",
      };
      if (shadowShape) {
        flyAirlineDataSource.entities.remove(shadowShape);
      }
      shadowShape = CesiumUtil.AddPolygon(polygon, flyAirlineDataSource);
    },
    // 打开图片窗口
    openPhoto(index) {
      // if (this.$refs.videoBox.show) {
      //   this.$refs.videoBox.toggleShow(false)
      //   this.releaseAliPlayer()
      // }
      // console.log('openPhoto', this.photoList[index])
      this.selectPhoto = JSON.parse(JSON.stringify(this.photoList[index]));
      this.requestShadowById(this.selectPhoto.photo_id);

      // 防止预警模块同时出现时导致最大化和分享按钮的出现
      this.$bus.emit("setSelectItemissueId", "");

      photoShape.forEach((item) => {
        if (item._id === this.selectPhoto.id) {
          item._point._color._value = new Cesium.Color(0, 1, 0, 1);
        } else {
          item._point._color._value = new Cesium.Color(1, 1, 1, 1);
        }
      });
      //
      this.$refs.videoBox.toggleShow(false);
      this.$refs.moveBox3.toggleShow(true);
      this.showIssueViewer = true;
      // this.$refs.imgBox2.SetImage(this.selectPhoto.out_url);
      //
      CesiumUtil.FlyToElementByGPS({
        longitude: this.selectPhoto.lng.toFixed(7),
        latitude: this.selectPhoto.lat.toFixed(7),
        height: this.selectPhoto.alt ? this.selectPhoto.alt : 0,
        distance: 2800,
        leftview2: true,
      });
    },
    // 关闭图片窗口
    closePhoto() {},
    closeVideo() {
      // this.releaseAliPlayer()
      this.videoMoveFlag = false;
      var video = document.getElementById("recordVideoA");
      //调用video标签的播放函数
      video.pause();
    },
    // 上一张图片
    previousPhoto() {
      if (this.photoIndex > 0) {
        this.photoIndex--;
      } else if (this.photoList.length > 0) {
        this.photoIndex = this.photoList.length - 1;
      }
      this.openPhoto(this.photoIndex);
    },
    // 下一张图片
    nextPhoto() {
      if (this.photoIndex < this.photoList.length - 1) {
        this.photoIndex++;
      } else {
        this.photoIndex = 0;
      }
      this.openPhoto(this.photoIndex);
    },
    // 暂不使用
    initBusEvent() {
      // 使用循环请求替代,暂不使用
      // this.$bus.on('flight_working_change', () => {
      //   setTimeout(() => {
      //     this.requestTodaySchedule()
      //   }, 10 * 1000)
      // })
      const that = this;
      this.$bus.on("hiddenLeftKanban", () => {
        // this.$message('hiddenLeftKanban')
        if (that.aliplayer)
          console.log("hiddenLeftKanban", that.aliPlayer.pause());
      });
      this.$bus.on("showLeftKanban", () => {
        // this.$message('showLeftKanban')
        if (that.aliplayer) {
          console.log("hiddenLeftKanban", that.aliPlayer.play());
        }
        // this.$message('showLeftKanban')
      });
      this.$bus.on("hiddenIssue", (data) => {
        scheduleDrawIssues.forEach((issue) => {
          // 业务调整，不需要隐藏了
          // issue._show = data
        });
      });
    },
    /**
     * 请求接口相关方法---------------------------------------
     */
    initParams() {
      this.$nextTick(() => {
        this.initNestIds();
      });
      this.initAirlineParams();
      this.initScheduleParams();
    },
    saveWord() {
      if (this.inputSearchWord.trim()) {
        let res = sessionStorage.getItem("view3SearchHistory");
        if (!res) {
          res = [];
        } else {
          res = JSON.parse(res);
        }
        if (res.includes(this.inputSearchWord.trim())) {
          const newArray = [];
          res.forEach(
            (item) =>
              item !== this.inputSearchWord.trim() && newArray.push(item)
          );
          res = newArray;
        }
        res.unshift(this.inputSearchWord.trim());
        if (res.length > 5) {
          res = res.slice(0, 5);
        }
        sessionStorage.setItem("view3SearchHistory", JSON.stringify(res));
      }
    },
    // 计划参数初始化
    initScheduleParams() {
      this.scheduleList = [];
      this.scheduleParams = {
        name: this.inputSearchWord.trim(),
        page: 1,
        page_size: 30,
        //
        totalPages: 0,
        dept_id: this.$store.getters.deptId,
      };
      this.loadingPastSchedule = false;
    },
    // 航线参数初始化
    initAirlineParams() {
      this.airlineList = [];
      this.airlineParams = {
        name: this.inputSearchWord.trim(),
        page: 1,
        page_size: 50,
        nest_code: this.filterNest ? this.filterNest.nest_code : null,
        sort_field: "flight_sorties",
        sort_type: this.orderType2, // 1 和 -1
        airline_type: this.filterUserType,
        //
        totalPages: 0,
        dept_id: this.$store.getters.deptId,
      };
      this.loadingAirlineList = false;
    },
    initNestIds() {
      this.nestList = this.$store.getters.nestList;
      if (this.nestList.length < 1) return;
      this.nestIds = this.nestList
        .map((item) => {
          return item.nest_code;
        })
        .join();
    },
    // 滚动加载任务
    handleScheduleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollTop <= this.scheduleScrollTop) {
        this.scheduleScrollTop = scrollTop;
        return;
      }
      this.scheduleScrollTop = scrollTop;
      if (
        Math.abs(scrollTop + clientHeight - scrollHeight) < 10 &&
        !this.loadingPastSchedule
      ) {
        if (this.scheduleParams.page < this.scheduleParams.totalPages) {
          this.scheduleParams.page++;
          this.requestPastSchedule();
        } else {
          if (document.getElementsByClassName("el-message").length === 0) {
            this.$message.info("已经到底了"); // 基本没底
          }
        }
      }
    },
    // 滚动加载航线
    handleAirlineScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollTop <= this.airlineScrollTop) {
        this.airlineScrollTop = scrollTop;
        return;
      }
      this.airlineScrollTop = scrollTop;
      if (
        Math.abs(scrollTop + clientHeight - scrollHeight) < 10 &&
        !this.loadingAirlineList
      ) {
        if (this.airlineParams.page < this.airlineParams.totalPages) {
          this.airlineParams.page++;
          this.requestAirlineList();
        } else {
          if (document.getElementsByClassName("el-message").length === 0) {
            this.$message.info("已经到底了"); // 基本没底
          }
        }
      }
    },
    requestTodaySchedule() {
      getTodayFlightSchedule({
        name: this.inputSearchWord.trim(),
        dept_id: this.$store.getters.deptId,
      }).then((response) => {
        this.updateTodaySchedule(response.data);
      });
    },
    requestPastSchedule() {
      this.loadingPastSchedule = true;
      if (this.scheduleParams.page === 1) {
        this.clearMap();
      }
      getPastFlightSchedule(this.scheduleParams)
        .then((response) => {
          this.updatePastSchedule(response.data.items);
          this.scheduleParams.page = response.data.current;
          this.scheduleParams.totalPages = response.data.total_pages;
        })
        .finally(() => {
          this.loadingPastSchedule = false;
        });
    },
    initScheduleData() {
      if (this.initValue?.scheduleList?.length > 0) {
        this.scheduleList = this.initValue.scheduleList;
        if (
          this.initValue?.scheduleSelected?.showAirline &&
          this.menuType === 1
        ) {
          this.$bus.emit("toggleIssueLayer", false);
          this.$bus.emit("toggleNestLayer", false);
          this.scheduleSelected = this.initValue.scheduleSelected;
          this.drawScheduleOnMap(this.initValue.scheduleSelected);
          if (this.scheduleSelected.flight_record) {
            setTimeout(() => {
              const element = document.getElementById(
                this.scheduleSelected.flight_record
              );
              element &&
                element.scrollIntoView({
                  behavior: "smooth",
                  block: "end",
                  inline: "nearest",
                });
            }, 1000);
          }
        }
      } else {
        this.requestTodaySchedule();
        this.requestPastSchedule();
      }
    },
    initAirlineData() {
      console.log("initValue", this.initValue);
      if (this.initValue?.airlineList?.length > 0) {
        this.airlineList = this.initValue.airlineList;
        if (
          this.initValue?.airlineSelectedArray?.length > 0 &&
          this.menuType === 2
        ) {
          setTimeout(() => {
            this.drawMultiAirlineOnMpa(
              this.initValue.airlineSelectedArray,
              true
            );
            const element = document.getElementById(
              this.initValue.airlineSelectedArray[0].airline_code
            );
            element &&
              element.scrollIntoView({
                behavior: "smooth",
                block: "end",
                inline: "nearest",
              });
          }, 1000);
        }
      } else {
        this.requestAirlineList();
      }
    },
    requestAirlineList() {
      this.loadingAirlineList = true;
      if (this.airlineParams.page === 1) {
        this.clearMap();
      }
      getAirlineList(this.airlineParams)
        .then((response) => {
          response.data.items = response.data.items.map((item) => {
            item.schedule_state = item.schedule_state === 1;
            item.airline_name = item.display_name
              ? item.display_name
              : item.airline_name;
            return item;
          });
          if (response.data.current === 1) {
            this.airlineList = response.data.items;
          } else {
            this.airlineList = this.airlineList.concat(response.data.items);
          }
          this.airlineParams.page = response.data.current;
          this.airlineParams.totalPages = response.data.total_pages;
        })
        .finally(() => {
          this.loadingAirlineList = false;
        });
    },
    // 数据格式化
    updateTodaySchedule(data) {
      if (!data || data.length < 1) return;
      // console.log('updateTodaySchedule1', data)
      // console.log('updateTodaySchedule2', this.scheduleSelected)
      data.forEach((item) => {
        if (this.scheduleSelected && item.name === this.scheduleSelected.name) {
          item.showAirline = this.scheduleSelected.showAirline;
        }
        item.showTimeStyle = this.getTimeStyle(item.state);
        item.showTime = this.getShowHour(item.time);
        item.itemStyle = this.getMissionColor(item.state);
      });
      const todaySchedule = [
        {
          scheduleDate: data[0].date,
          scheduleDateTitle: this.getDataTitle(data[0].date),
          scheduleList: data,
        },
      ];
      if (
        this.scheduleList[0] &&
        this.scheduleList[0].scheduleDate === todaySchedule[0].scheduleDate
      ) {
        this.scheduleList[0] = todaySchedule[0];
      } else {
        this.scheduleList = todaySchedule.concat(this.scheduleList);
      }
      this.$forceUpdate();
    },
    updatePastSchedule(date) {
      const pastSchedule = this.formatPastDate(date);
      if (pastSchedule.length === 0) return;
      const lastSchedule = this.scheduleList[this.scheduleList.length - 1];
      //
      if (
        lastSchedule &&
        lastSchedule.scheduleDate === pastSchedule[0].scheduleDate
      ) {
        this.scheduleList[this.scheduleList.length - 1].scheduleList =
          lastSchedule.scheduleList.concat(pastSchedule[0].scheduleList);
        if (pastSchedule.length > 1) {
          pastSchedule.shift();
          this.scheduleList = this.scheduleList.concat(pastSchedule);
        }
      } else {
        this.scheduleList = this.scheduleList.concat(pastSchedule);
      }
      console.log(this.scheduleList);
      // this.$forceUpdate()
    },
    //
    formatPastDate(data) {
      if (data.length === 0) return [];
      //
      const result = [];
      let scheduleDate = data[0].date;
      let scheduleList = [];
      //
      data.forEach((item) => {
        item.showTimeStyle = this.getTimeStyle(item.state);
        item.showTime = this.getShowHour(item.time);
        item.itemStyle = this.getMissionColor(item.state);
      });
      for (let i = 0; i < data.length; i++) {
        if (scheduleDate !== data[i].date) {
          result.push({
            scheduleDate: scheduleDate,
            scheduleDateTitle: this.getDataTitle(scheduleDate),
            scheduleList: scheduleList,
          });
          scheduleList = [data[i]];
          scheduleDate = data[i].date;
        } else {
          scheduleList.push(data[i]);
        }
      }
      if (scheduleList.length > 0) {
        result.push({
          scheduleDate: scheduleDate,
          scheduleDateTitle: this.getDataTitle(scheduleDate),
          scheduleList: scheduleList,
        });
      }

      return result;
    },
    /**
     * 获取任务图片信息
     */
    async requestFlightDetail(code, nestHeight) {
      // 照片和问题
      getFlightDetail({
        record_code: code,
      })
        .then((response) => {
          console.log("getFlightDetail", response);
          this.photoList = response.data.photos;
          this.endTime = response.data.flight_land_time;
          this.startTime = response.data.flight_start_time;
          this.showPhotoOnMap();

          // this.drawIssueOnMap(response.data.issue_points)
          this.showIssueOnMap(response.data.issue_points);
        })
        .catch((e) => {
          if (scheduleShape && viewer) {
            viewer.flyTo([scheduleShape]);
          }
        });
      // 轨迹
      const params = { flight_record_code: code };
      const res = await getFlightTrack(params);
      if (res && res.msg === "ok" && res.data.length > 0) {
        this.showFlyHistoryOnMap(res.data, nestHeight);
      }
    },
    /**
     * 用户操作-------------
     */
    // 更改列表
    setMenuType(val) {
      this.menuType = val;
      if (this.menuType === 2) {
        this.scheduleSelected = null;
      }

      this.clearMap();
    },
    //
    renameAirline(airline, index) {
      if (!this.inputAirlineName) {
        this.$message.warning("请输入航线名称");
      } else if (airline.airline_name === this.inputAirlineName) {
        this.$refs.popoverNameRef[index].doClose();
      } else {
        updateAirline({
          airline_code: airline.airline_code,
          display_name: this.inputAirlineName,
        }).then((res) => {
          if (res.msg === "ok") {
            this.$message.success("修改成功");
            airline.airline_name = this.inputAirlineName;
            this.$refs.popoverNameRef[index].doClose();
          } else {
            this.$message.warning("修改失败，请检查网络");
          }
        });
      }
    },
    setAirlineName(airline) {
      this.inputAirlineName = airline.airline_name;
    },
    searchWord() {
      this.hideSearchHistory();
      this.saveWord();
      this.initParams();
      this.requestTodaySchedule();
      this.requestPastSchedule();
      this.requestAirlineList();
    },
    refresh() {
      this.inputSearchWord = "";
      this.initParams();
      this.requestTodaySchedule();
      this.requestPastSchedule();
      this.requestAirlineList();
    },
    hideSearchHistory() {
      const elements = document.getElementsByClassName("el-autocomplete");
      if (elements.length > 0) {
        elements[0].__vue__.activated = false;
      }
    },
    // 搜索框清空时，刷新列表
    inputWordChange() {
      if (!this.inputSearchWord.trim()) {
        this.searchWord();
      }
    },
    // 暂不使用
    reversOrderType1() {
      this.orderType1 = this.orderType1 === 0 ? 1 : 0;
    },
    // 根据飞行次数排序航线
    reversOrderType2() {
      this.orderType2 = this.orderType2 === -1 ? 1 : -1;
      this.initAirlineParams();
      this.requestAirlineList();
    },
    // 控制列表中航线可见
    reversAirlineVisible() {
      this.allAirlineVisible = !this.allAirlineVisible;
      if (this.allAirlineVisible) {
        for (let i = 0; i < this.airlineList.length; i++) {
          if (!this.airlineList[i].showAirline) {
            this.showHideFlightOnMap(this.airlineList[i], false);
          }
        }
      } else {
        this.clearMap();
      }
    },
    // 进入飞行监控界面
    gotoNestComp(flight) {
      if (!this.userAuthor?.flight_monitor?.query?.have_auth) return;

      const nest = this.nestList.filter((item) => {
        return flight.nest_name === item.nest_name;
      });
      // 调用父组件的父组件的方法(index.vue 中的方法)
      this.$parent.$parent.openNest(nest[0]);
    },
    /**
     * 打开视频回放
     */
    showRecordVideo(flight) {
      if (!flight.showAirline) {
        this.clickSchedule(flight);
      }
      this.videoMoveFlag = true;
      if (this.$refs.videoBox.show) {
        this.$refs.videoBox.toggleShow(false);
      } else {
        getRecordVideo({
          flight_record_code: flight.flight_record,
        }).then((item) => {
          if (item.data) {
            this.tipsShow = false;
            this.$refs.moveBox3.toggleShow(false);
            this.showIssueViewer = false;
            this.$refs.videoBox.toggleShow(true);

            this.downVideoUrl = item.data;
            let diffTime = moment(this.endTime).diff(
              moment(this.startTime),
              "seconds"
            );
            let video = document.getElementById("recordVideoA");
            // 实际飞行时间超出视频时间两分钟，显示提示
            if (diffTime - video.duration > 120) {
              this.tipsShow = true;
            }

            if (this.downVideoUrl.includes("fsimage")) {
              const regex = /\/record\/flysee\/[^\/]+\/(\d+)-/;
              const match = this.downVideoUrl.match(regex);
              console.log(match[1]);
              this.videoStartTime = moment(Number(match[1]) + 2000).format(
                "YYYY-MM-DD HH:mm:ss"
              );
              // 如果找到匹配项，则返回捕获的数字序列，否则返回null
              console.log(this.videoStartTime, Number(match[1]));
              this.computedTime(video);

              if (videoInterval) {
                clearInterval(videoInterval);
                videoInterval = null;
              }
              videoInterval = setInterval(() => {
                this.computedTime(video);
              }, 1000);
            } else {
              setTimeout(() => {
                this.videoStartTime = moment(this.endTime)
                  .subtract(video.duration, "seconds")
                  .format("YYYY-MM-DD HH:mm:ss");

                console.log(this.videoStartTime, video.duration, diffTime);
              }, 500);

              this.computedTime(video);

              if (videoInterval) {
                clearInterval(videoInterval);
                videoInterval = null;
              }
              videoInterval = setInterval(() => {
                this.computedTime(video);
              }, 1000);
            }
          } else {
            this.$message({
              showClose: true,
              message: item.msg,
              type: "warning",
            });
          }
        });
      }
    },

    // 计算当前时间
    computedTime(video) {
      if (!this.videoMoveFlag) return;
      let that = this;
      that.videoCurrentTime = video.currentTime.toFixed(0);
      // 视频当前时间
      that.videoNowTime = moment(that.videoStartTime)
        .add(that.videoCurrentTime, "seconds")
        .format("YYYY-MM-DD HH:mm:ss");
      // 进度
      that.$nextTick(() => {
        const pointPlan = this.points.find((point) => {
          if (point.create_time === that.videoNowTime) {
            return point;
          }
        });
        this.aircraftSocketInfo = pointPlan
          ? pointPlan
          : this.aircraftSocketInfo;
        console.log(pointPlan, this.aircraftSocketInfo);
        this.drawAircraftOnMap();
      });
    },

    /**
     * 任务计划列表，点击事件
     */
    clickSchedule(flight) {
      const oldShowFlag = flight.showAirline;
      this.clearMap();
      this.scheduleSelected = flight;
      // 选中航线处理: 1.正在飞行 2.已绘制航线 3. 未绘制航线
      if (flight.state === "正在飞行") {
        this.gotoNestComp(flight);
      } else {
        //  数据处理
        if (flight.points.length > 0 && !flight.points[0].alt) {
          flight.points = flight.points.map((point) => {
            return {
              alt: point[2],
              lat: point[1],
              lng: point[0],
            };
          });
        }
        // 绘制或移除航线
        if (oldShowFlag) {
          this.$bus.emit("toggleIssueLayer", true);
          this.$bus.emit("toggleNestLayer", true);
          this.scheduleSelected = null;
        } else {
          this.$bus.emit("toggleIssueLayer", false);
          this.$bus.emit("toggleNestLayer", false);
          this.drawScheduleOnMap(flight);
        }
      }
    },
    changeStatus(val, item) {
      const code = item.airline_code;
      // if (val)
      updateAirline({
        airline_code: code,
        status: val ? 1 : 0,
      }).then(() => {
        item.schedule_state = val;
      });
    },
    userTypeChange(val) {
      if (val === "") {
        this.filterUserType = null;
      }
      this.initAirlineParams();
      this.requestAirlineList();
    },
    userNestChange(val) {
      this.initAirlineParams();
      this.requestAirlineList();
    },
    /**
     * 任务图形绘制
     */
    // 通过Id移除地图图形
    deleteShape(shapeId) {
      const obj = flyAirlineDataSource.entities.getById(shapeId);
      flyAirlineDataSource.entities.remove(obj);
    },
    // 清除当前任务的所有图形
    // clearScheduleOnMap(airline) {
    //   if (airline.lineId) {
    //     this.deleteShape(airline.lineId)
    //   }
    //   if (photoShape.length > 0) {
    //     photoShape.forEach(item => {
    //       this.deleteShape(item._id)
    //     })
    //     photoShape = []
    //   }
    //   if (recordShape) {
    //     this.deleteShape(recordShape._id)
    //     recordShape = ''
    //   }
    //   airline.lineId = ''
    //   airline.showAirline = false
    //   this.$forceUpdate()
    // },
    // 绘制任务
    drawScheduleOnMap(airline) {
      if (!this.airline_schedule_check_airline_auth) return;
      if (this.nestList.length < 1) {
        this.initNestIds();
      }
      console.log(airline);
      const data = airline.points;
      if (!data || data.length === 0) {
        return;
      }
      // 机巢高度
      const nest = this.nestList.filter((item) => {
        return item.nest_name === airline.nest_name;
      })[0];
      const nestHeight = nest.position.altitude;
      // 绘制数据
      const pointArr = [];
      let shape = "";
      let result = "";
      // 全景绘制单点
      if (data.length === 1) {
        let shapePosition = Cesium.Cartesian3.fromDegrees(
          data[0].lng,
          data[0].lat,
          data[0].alt ? data[0].alt + nestHeight : nestHeight
        );
        shapeOption = {
          type: "point",
          color: "rgba(0,255,255,0.9)",
          colorAlpha: 0.9,
          size: 20,
          outlineWidth: 4,
          // id: airline.name ? airline.name : airline.airline_code
        };

        result = CesiumUtil.drawPoint(
          shapePosition,
          flyAirlineDataSource,
          shapeOption
        );
      } else {
        // 其他绘制线
        for (let j = 0; j < data.length; j++) {
          if (data[j]) {
            pointArr.push(
              data[j]["lng"],
              data[j]["lat"],
              data[j]["alt"] ? data[j]["alt"] + nestHeight : nestHeight
            );
          }
        }
        shape = {
          type: "airline",
          positions: pointArr,
          color: "rgba(0,255,255,0.9)",
          isheight: true,
        };
        result = CesiumUtil.AddLine(shape, flyAirlineDataSource);
      }
      scheduleShape = result;
      airline.airline_code = result.id;
      airline.showAirline = true;
      //
      flyAirlineDataSource.show = true;
      //
      // this.$message(airline.state)
      viewer.flyTo([scheduleShape]);
      console.log("12061111", airline);
      console.log("12061111", airline.flight_record);
      console.log("12061111", nestHeight);
      if (airline.state === "已经飞行") {
        // 飞行轨迹和照片
        this.requestFlightDetail(airline.flight_record, nestHeight);
      }

      this.$forceUpdate();
    },
    /**
     *  显示问题点位，替换drawIssueOnMap功能
     */
    showIssueOnMap(issuePoints) {
      if (!this.airline_schedule_check_warning_auth) return;
      issuePoints.forEach((issue) => {
        const findIssue = false;
        if (!findIssue) {
          this.drawIssueOnMap(issue);
        }
        flyAirlineDataSource.show = true;
      });
    },
    drawIssueOnMap(issue) {
      const mark = {
        id: "issue_" + issue.issue_id,
        name: issue.scene_name,
        type: "issue",
        longitude: issue.lng,
        latitude: issue.lat,
        height: issue.alt,
        scale: 0.85,
        pixelOffset: [0.0, -10.0],
        distanceShow: [100, 8000],
        icon: issue.icon_url
          ? issue.icon_url
          : "http://fsimage.guihuao.com/mark_tag_icon/vubwzv4d41.png",
      };
      const entity = CesiumUtil.AddMark(mark, flyAirlineDataSource);
      scheduleDrawIssues.push(entity);
      //
      const billboard = entity._billboard;
      billboard.scale = 0.9;
      billboard.color = new Cesium.Color.fromBytes(255, 255, 255, 255);
      const label = entity._label;
      label.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
        10.0,
        1000.0
      );
    },
    showFlyHistoryOnMap(points, nestHeight) {
      if (!this.airline_schedule_check_pic_auth) return;
      //
      const pointArr = [];
      let shape = "";

      if (this.checkPointValid(points)) {
        const flyData = points;
        console.log(flyData);
        for (let i = 0; i < flyData.length; i++) {
          if (
            flyData[i] &&
            flyData[i]["longitude"] &&
            flyData[i]["latitude"] &&
            flyData[i]["altitude"]
          ) {
            pointArr.push(
              flyData[i]["longitude"],
              flyData[i]["latitude"],
              flyData[i]["altitude"]
            );
          }
        }
        shape = {
          type: "airline",
          positions: pointArr,
          color: "rgba(255,255,0,0.9)",
          isheight: true,
        };
        recordShape = CesiumUtil.AddLine(shape, flyAirlineDataSource);
        console.log([recordShape, scheduleShape]);
        viewer.flyTo([recordShape, scheduleShape]);
        this.points = points;
        // this.aircraftSocketInfo = points[64]
        // this.drawAircraftOnMap()
      } else {
        this.$message.info("航线飞行数据异常");
      }
    },

    /**
     *  绘制飞机位置
     */
    drawAircraftOnMap() {
      if (!this.videoMoveFlag) return;
      if (
        this.aircraftSocketInfo &&
        this.aircraftSocketInfo.longitude &&
        this.aircraftSocketInfo.latitude
      ) {
        var h =
          this.aircraftSocketInfo.altitude +
          // this.nestInfo.position.altitude +
          2;
        // 飞机绘制
        var p = Cesium.Cartesian3.fromDegrees(
          this.aircraftSocketInfo.longitude,
          this.aircraftSocketInfo.latitude,
          h
        );

        var head =
          this.aircraftSocketInfo.attitude_head < 0
            ? this.aircraftSocketInfo.attitude_head + 360
            : this.aircraftSocketInfo.attitude_head;

        var heading = Cesium.Math.toRadians(head + 180);

        var hpr = new Cesium.HeadingPitchRoll(heading, 0, 0); // 3.14159
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(p, hpr);
        if (aircraftDataSource) {
          if (!Cesium.defined(MyPlane)) {
            var m = {
              position: p,
              orientation: orientation,
            };
            MyPlane = new CesiumUtil.PlaneModel(m, aircraftDataSource);
          } else {
            MyPlane.update(p, orientation);
          }
          aircraftDataSource.show = true;
        }
      } else {
        if (MyPlane) {
          MyPlane.remove();
          MyPlane = null;
        }
      }
    },

    showPhotoOnMap() {
      if (!this.airline_schedule_check_pic_auth) return;
      // this.photoList = airline.points.map(item => {
      //   item.photoUrl = 'http://fsimage.guihuao.com/771c8485-8d5a-4a35-9e3d-fe06ca1e3b7a/4690865518305873921.jpg'
      //   return item
      // })
      const photoData = this.photoList; // 点和图
      let result;
      //
      for (let j = 0; j < photoData.length; j++) {
        if (photoData[j]) {
          let pointPosition = Cesium.Cartesian3.fromDegrees(
            photoData[j].lng,
            photoData[j].lat,
            photoData[j].alt ? photoData[j].alt : 0
          );
          const pointOption = {
            type: "photo",
            color: "rgba(255,255,255,0.9)",
            colorAlpha: 0.9,
            size: 10,
            // id: airline.name ? airline.name : airline.airline_code
          };
          result = CesiumUtil.drawPoint(
            pointPosition,
            flyAirlineDataSource,
            pointOption
          );
          photoShape.push(result);
          photoData[j].id = result.id;
        }
      }
    },

    checkPointValid(pointList) {
      for (let i = 0; i < pointList.length; i++) {
        if (
          pointList[i].lng === 0 ||
          pointList[i].lng > 136 ||
          pointList[i].lng < 73 ||
          pointList[i].lat === 0 ||
          pointList[i].lat < 3 ||
          pointList[i].lat > 53
        ) {
          console.log("checkPointValid", pointList[i]);
          return false;
        }
      }
      return true;
    },

    // 绘制航线
    showHideFlightOnMap(airline, move) {
      if (airline.showAirline) {
        if (airline.airline_code) {
          const obj = flyAirlineDataSource.entities.getById(
            airline.airline_code
          );
          obj && flyAirlineDataSource.entities.remove(obj);
        }
        airline.showAirline = false;
        this.$forceUpdate();
      } else {
        this.drawFlightOnMap(airline, move);
      }
    },

    drawFlightOnMap(airline, move) {
      if (!this.airline_schedule_check_airline_auth) return;
      if (this.nestList.length < 1) {
        this.initNestIds();
      }
      const data = airline.points;
      airline.showAirline = true;
      if (!data.length || data.length === 0) return;
      const nest = this.nestList.filter((item) => {
        return item.nest_name === airline.nest_name;
      })[0];
      const nestHeight = nest.position.altitude;
      if (move) {
        CesiumUtil.FlyToElementByGPS({
          longitude: data[0]["lng"],
          latitude: data[0]["lat"],
          height: data[0]["alt"] ? data[0]["alt"] + nestHeight : nestHeight,
          // longitude: 118.459463,
          // latitude: 28.930728,
          // height: 134.24,
          distance: 2800,
        });
      }
      // 绘制航线
      const pointArr = [];
      let shape = "";
      let result = "";
      if (data.length === 1) {
        let shapePosition = Cesium.Cartesian3.fromDegrees(
          data[0].lng,
          data[0].lat,
          data[0].alt ? data[0].alt + nestHeight : nestHeight
        );
        let shapeOption = {
          id: airline.airline_code,
          type: "point",
          color: "rgba(0,255,255,0.9)",
          colorAlpha: 0.9,
          size: 20,
          outlineWidth: 4,
          // id: airline.name ? airline.name : airline.airline_code
        };

        result = CesiumUtil.drawPoint(
          shapePosition,
          flyAirlineDataSource,
          shapeOption
        );
      } else {
        for (let j = 0; j < data.length; j++) {
          if (data[j]) {
            pointArr.push(
              data[j]["lng"],
              data[j]["lat"],
              data[j]["alt"] ? data[j]["alt"] + nestHeight : nestHeight
            );
          }
        }
        shape = {
          id: airline.airline_code,
          type: "airline",
          positions: pointArr,
          color: "rgba(0,255,255,0.9)",
          isheight: true,
        };
        result = CesiumUtil.AddLine(shape, flyAirlineDataSource);
      }
      // airline.airline_code = result.id
      flyAirlineDataSource.show = true;
      this.$forceUpdate();
    },

    drawMultiAirlineOnMpa(airlineArray, move) {
      if (airlineArray.length === 1) {
        this.drawFlightOnMap(airlineArray[0], move);
      } else if (airlineArray.length > 1) {
        airlineArray.forEach((airline) => {
          this.drawFlightOnMap(airline, false);
        });
        // viewer.flyTo(flyAirlineDataSource.entities.values,{duration:3})
        this.initCamera();
      }
    },
    //
    saveRule(airLine, index) {
      const params = {
        airline_code: airLine.airline_code,
      };
      if (this.useType !== airLine.airline_type) {
        params.airline_type = this.useType;
      }
      if (this.ruleType === 0) {
        params.schedule_type = 0;
      } else if (this.ruleType === 1) {
        params.schedule_type = 1;
        params.cycle_times = this.loopNum;
        params.schedule_cycle = this.loopUnit;
      } else if (this.ruleType === 2) {
        params.schedule_type = 2;
        params.plane_time = this.loopDate;
      }
      // airline_code:e452feb5-2acc-4a45-9c48-000aff83fead
      // schedule_type:2
      // airline_type:3
      // plane_time:2022-12-08 02:01:03
      updateAirline(params).then((res) => {
        if (res.msg === "ok") {
          // 更新数据
          // "airline_code": "3e4144d6-b172-4dc2-b817-915ed2875751",
          //   "airline_type": 4,
          //   "cycle_times": 0,
          //   "is_del": 0,
          //   "nest_code": "607a3e23-ac60-4393-8c80-239e845bda44",
          //   "plane_time": "2022-12-12 00:00:00",
          //   "schedule_cycle": null,
          //   "schedule_type": 0,
          this.$message.success("修改成功");
          this.updateRuleType(airLine, index, res.data);
        } else {
          this.$message.warning("修改失败，请检查网络");
        }
      });
    },
    closeRuleEdit(index) {
      this.$refs.popoverRef[index].doClose();
    },
    setPopoverData(airline) {
      this.useType = null;
      this.loopDate = null;
      this.loopUnit = null;
      // 航线类型
      this.useType = airline.airline_type;
      //
      if (airline.schedule_type === "默认自动排期") {
        this.ruleType = 0;
      } else if (airline.schedule_type === "单次") {
        this.ruleType = 2;
        this.loopDate = airline.schedule_cycle;
      } else if (airline.schedule_type === "循环") {
        this.ruleType = 1;
        this.loopNum = airline.schedule_cycle.match(/\d+/g).join();
        if (airline.schedule_cycle.indexOf("日") > 0) {
          this.loopUnit = "日";
        } else if (airline.schedule_cycle.indexOf("周") > 0) {
          this.loopUnit = "周";
        } else if (airline.schedule_cycle.indexOf("月") > 0) {
          this.loopUnit = "月";
        }
      }
    },
    updateRuleType(airLine, index, data) {
      if (data.schedule_type === 0) {
        airLine.schedule_type = "默认自动排期";
      } else if (data.schedule_type === 1) {
        // 循环
        if (data.schedule_cycle === 1) {
          airLine.schedule_cycle = `每日执行${data.cycle_times}次`;
        } else if (data.schedule_cycle === 2) {
          airLine.schedule_cycle = `每周执行${data.cycle_times}次`;
        } else if (data.schedule_cycle === 3) {
          airLine.schedule_cycle = `每月执行${data.cycle_times}次`;
        }
        airLine.schedule_type = "循环";
      } else if (data.schedule_type === 2) {
        airLine.schedule_type = "单次";
        airLine.schedule_cycle = data.plane_time;
      }
      airLine.airline_type = this.UseTypeList[data.airline_type].label;
      this.$refs.popoverRef[index].doClose();
      this.$forceUpdate();
    },
    /**
     * 样式和数据格式---------------------------------
     */
    getDataTitle(date) {
      const yesterday = new Date();
      yesterday.setTime(yesterday.getTime() - 24 * 60 * 60 * 1000);
      const yesterdayStr =
        yesterday.getFullYear() +
        "-" +
        (yesterday.getMonth() + 1 < 10
          ? "0" + (yesterday.getMonth() + 1)
          : yesterday.getMonth() + 1) +
        "-" +
        (yesterday.getDate() < 10
          ? "0" + yesterday.getDate()
          : yesterday.getDate());
      const today = new Date();
      today.setTime(today.getTime());
      const todayStr =
        today.getFullYear() +
        "-" +
        (today.getMonth() + 1 < 10
          ? "0" + (today.getMonth() + 1)
          : today.getMonth() + 1) +
        "-" +
        (today.getDate() < 10 ? "0" + today.getDate() : today.getDate());
      if (date === todayStr) {
        return "今天";
      } else if (date === yesterdayStr) {
        return "昨天";
      } else {
        return "";
      }
    },
    getTimeStyle(val) {
      if (val === "取消飞行") {
        return "time_canceled";
      } else if (val === "已经飞行") {
        return "time_finished";
      } else if (val === "正在飞行") {
        return "time_working";
      } else if (val === "等待飞行") {
        return "time_planned";
      }
    },
    getShowHour(time) {
      if (!time) return "--:--";
      const timeStr = time.substring(11, 16);
      if (timeStr === "00:00") {
        return "--:--";
      } else {
        return time.substring(11, 13);
      }
    },
    getMissionColor(val) {
      if (val === "等待飞行" || val === "正在飞行") {
        return "mission_title_light";
      } else if (val === "已经飞行") {
        return "mission_title_white";
      } else if (val === "取消飞行") {
        return "mission_title_grey";
      }
    },
    changeRuleType() {
      this.loopDate = "";
      this.loopUnit = 1;
      this.loopNum = 0;
    },
    // 未使用
    getTitleByCode(code) {
      if (!code) return "";
      const res = this.nestList.filter((item) => {
        return item.nest_code === code;
      });
      if (res.length > 0) {
        return res[0].nest_name;
      } else {
        return "";
      }
    },
    // 未使用
    getLabelByCode(name) {
      const resArr = name.split(/-|－/);
      return resArr[0];
    },
    //
    historySearch(queryString, cb) {
      const res = sessionStorage.getItem("view3SearchHistory");
      if (!res) {
        cb([]);
      } else {
        cb(JSON.parse(res));
      }
    },
    handleSelectHistory(item) {
      this.inputSearchWord = item;
      this.searchWord();
    },
    getCameraInfo() {
      if (viewer && viewer.scene && viewer.scene.camera) {
        const head = viewer.scene.camera.heading;
        const pitch = viewer.scene.camera.pitch;
        const roll = viewer.scene.camera.roll;
        const info = { head, pitch, roll };
        const cameraPosition = viewer.camera.position;
        const cartographic =
          viewer.scene.globe.ellipsoid.cartesianToCartographic(cameraPosition);
        const lat = Cesium.Math.toDegrees(cartographic.latitude);
        const lng = Cesium.Math.toDegrees(cartographic.longitude);
        const alt = cartographic.height;
        return { info, lat, lng, alt };
      } else {
        return null;
      }
    },
    initCamera() {
      if (viewer && this.initValue.cameraInfo) {
        const cameraInfo = this.initValue.cameraInfo;
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            cameraInfo.lng,
            cameraInfo.lat,
            cameraInfo.alt
          ),
          orientation: {
            heading: cameraInfo.info.head,
            pitch: cameraInfo.info.pitch,
            roll: cameraInfo.info.roll,
            // roll: Cesium.Math.toRadians(0.0)
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
#downloadvideo {
  position: absolute;
  border-radius: 10px;
  background-color: rgba(66, 65, 65, 0.3);
  padding: 4px;
  top: 10px;
  right: 10px;
  font-size: 15px;
  cursor: pointer;

  &:hover {
    background-color: rgba(66, 65, 65, 0.6);
  }
}

.mytooltip {
  padding: 0;
  margin: 15px;
  border-radius: 0;
  border: none;
  /*background: none;*/

  .button {
    margin: 0;
    padding: 5px 10px;
    background-color: rgba(0, 170, 255, 0.4);
    color: white;
  }
}

.mytooltip2 {
  padding: 10px;
  margin: 15px;
  border-radius: 5px;
  border: none;
  color: black;
  background: rgba(10, 30, 40, 0.9);
}

.el-autocomplete {
  caret-color: white !important;
  user-select: auto !important;
}

.el-autocomplete-suggestion {
  background-color: rgba(12, 35, 46, 0.9);
  border: rgba(0, 170, 255, 0.3) 1px solid;
  border-radius: 0;
  margin-top: 6px !important;
}

.el-autocomplete-suggestion__wrap {
  padding: 0;

  li:hover {
    background-color: rgba(0, 170, 255, 0.3);
  }
}

.popper__arrow {
  visibility: hidden;
}
</style>

<style lang="scss" scoped>
* {
  caret-color: transparent;
  user-select: none;
}

.input-with-select {
  caret-color: auto;
}

.historyItem {
  align-items: center;
  justify-content: flex-start;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  padding: 8px;

  .history-icon {
    width: 15px;
    height: 15px;
    margin-right: 8px;
  }

  .history-text {
    font-size: 13px;
    line-height: 15px;
    align-content: center;
    overflow: hidden;
    /* 超出一行文字自动隐藏 */
    text-overflow: ellipsis;
    /*文字隐藏后添加省略号*/
    white-space: nowrap;
    /*强制不换行*/
  }
}

$text-color-orange: darkorange;
$text-color-blue: rgba(0, 170, 255, 1);
$text-color-green: lawngreen;
$text-color-white: white;
$text-color-grey: #b5b5b5;

//
$bg-color-blue: rgba(0, 170, 255, 0.3);
$bg-color-green: rgba(255, 255, 0, 0.1);
$bg-color-grey: rgba(255, 255, 255, 0.1);

.flex_row {
  display: flex;
  flex-direction: row;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.svg_icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
  cursor: pointer;
}

::v-deep .el-input__inner {
  background: rgba(173, 196, 207, 0.3);
  border: grey 1px solid;
  color: white;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  padding-right: 10px;
}

::v-deep .el-input-group__append {
  background: $bg-color-blue;
  border: grey 1px solid;
  padding: 0 10px;
}

::v-deep .el-input__icon {
  height: auto;
  line-height: 1;
}

::v-deep .el-range-input {
  color: white;
  background: rgba(173, 196, 207, 0);
}

::v-deep .el-range-separator {
  color: white;
  margin-bottom: 3px;
}

::v-deep .el-input-number {
  height: 24px;
  margin: 0 5px;
  padding: 0;
  line-height: 24px;
  width: 120px;

  .el-input__inner {
    padding: 0;
  }

  .el-input-number__increase {
    margin: 0;
    height: 24px;
    padding: 0;
  }

  .el-input-number__decrease {
    margin: 0;
    height: 24px;
    padding: 0;
  }
}

::v-deep .el-autocomplete {
  width: 100%;
}

//::v-deep .el-select__tags-text {
//  display: inline-block;
//  max-width: 40px;
//  overflow: hidden;
//  text-overflow: ellipsis;
//  white-space: nowrap;
//}

// -------------------
.el-table {
  ::v-deep tr:hover > td {
    background: none;
  }

  ::v-deep tr > td {
    background: none;
    border-bottom: black 5px solid;
  }
}

::v-deep .el-tag.el-tag--info {
  height: 18px;
}

::v-deep .prism-cc-btn {
  display: none;
}

::v-deep .prism-setting-btn {
  display: none;
}

::v-deep .prism-volume {
  display: none;
}

.el-select-dropdown__item {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
}

::v-deep .loading-center {
  visibility: hidden;
}

::v-deep .prism-controlbar {
  //display:  !important;
}

//::v-deep  .prism-fullscreen-btn {
//  display:none !important;
//}

::v-deep .prism-ErrorMessage {
  display: none !important;
}

.wrap {
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;

  .head_wrap {
    padding: 4px 15px;

    .search_wrap {
      padding: 10px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .refresh {
        padding: 0;
        margin: 0 0 0 4px;
        background-color: rgba(0, 170, 255, 0.3);
        width: 27px;
        height: 24px;
        border-radius: 4px;
        border: rgb(128, 128, 128) solid 1px;
        color: rgb(144, 147, 153);
      }
    }

    .menu_wrap {
      border: $text-color-blue 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      //background: cornflowerblue;

      .menu_line {
        width: 1px;
        height: 40px;
        background: $text-color-blue;
      }

      .menu_item {
        cursor: pointer;
        flex: 1;
        padding: 10px 20px;
        display: flex;
        flex-direction: row;

        .menu_icon {
          width: 20px;
          height: 20px;
        }

        .menu_name {
          margin: auto;
          font-size: 12px;
        }
      }

      .menu_selected {
        background: $bg-color-blue;
      }

      .menu_unselected {
        //background: midnightblue;
      }
    }
  }

  .content_wrap {
    height: 0;
    //margin: 5px;
    flex: 1;
    display: flex;
    flex-direction: column;
    //overflow-y: auto;
    //background: linear-gradient(
    //    to right,
    //    rgba(24, 99, 135, 0.9),
    //    rgba(24, 99, 135, 0.1) 3%,
    //    rgba(24, 99, 135, 0.1) 97%,
    //    rgba(24, 99, 135, 0.9)
    //), linear-gradient(
    //    to bottom,
    //    rgba(24, 99, 135, 0.9),
    //    rgba(24, 99, 135, 0.1) 3%,
    //    rgba(24, 99, 135, 0.1) 97%,
    //    rgba(24, 99, 135, 0.9)
    //);

    .container {
      position: relative;
      height: 100%;
      width: 100%;

      position: relative;
      .videoText {
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 18px;
        color: #fff;
        opacity: 0.8;
        text-shadow: 1px 2px 3px #333;
        display: flex;
        align-items: center;
        .flag {
          margin-left: 10px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          color: #fff;
          background-color: rgba(0, 0, 0, 0.6);
          font-size: 14px;
          line-height: 18px;
          cursor: pointer;
        }
      }

      ::v-deep video {
        object-fit: fill !important;
      }

      .leftbtn {
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        background-color: rgba(200, 200, 200, 0.6);
        border-radius: 4px;

        .svg-icon {
          width: 30px;
          height: 60px;
        }
      }

      .rightbtn {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        background-color: rgba(200, 200, 200, 0.6);
        border-radius: 4px;

        .svg-icon {
          width: 30px;
          height: 60px;
        }
      }

      .photo_info {
        position: absolute;
        width: 100%;
        bottom: 5%;
        left: 0;
        color: white;
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr auto;
        font-size: 12px;
        padding: 10px;
        grid-row-gap: 5px;

        div {
          text-align: start;
        }
      }
    }

    .item_schedule {
      margin: 0 5px 0 0;

      .title {
        text-align: start;
        margin: 25px 10px 15px 10px;

        .title_text {
          font-size: 18px;
          font-weight: bold;
        }

        .title_date {
          margin-left: 5px;
          font-size: 14px;
          font-weight: bold;
        }
      }

      .mission_list {
        .mission_time {
          padding: 5px;
          font-size: 12px;
          width: 70px;
        }

        .time_canceled {
          color: grey;
        }

        .time_finished {
          color: white;
        }

        .time_working {
          color: $text-color-green;
        }

        .time_planned {
          color: $text-color-orange;
        }

        .mission_icon {
          position: relative;

          .line {
            position: absolute;
            top: 0;
            left: 6.5px;
            width: 0;
            height: 100%;
            border-right: solid #acc0d8 1px;
            z-index: 0;
            //lef
          }

          .icon {
            z-index: 1;

            margin-left: -5px;
            padding: 0;
            width: 25px;
            height: 25px;
          }

          .icon_top {
            margin-top: 0;
          }

          .icon_normal {
            margin-top: 6px;
          }

          .circle {
            width: 14px;
            height: 14px;
            margin-right: 6px;
            box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.4) inset;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            padding: 0;
            z-index: 1;
          }

          .orange {
            background: $text-color-orange;
            box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.4) inset;
          }

          .grey {
            background: darkgrey;
            box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.4) inset;
          }
        }

        .mission_content {
          background: rgba(255, 255, 255, 0.04);
          border-bottom: lightgrey 1px solid;
          text-align: start;
          justify-content: center;
          padding: 8px;
          flex: 1;
          font-size: 12px;
          color: $text-color-grey;
          cursor: pointer;
          //margin: auto;

          .mission_title {
            font-size: 14px;
          }

          .mission_title_light {
            color: $text-color-blue;
          }

          .mission_title_white {
            color: white;
          }

          .mission_title_grey {
            color: darkgrey;
          }

          .mission_name {
            color: white;
          }

          .mission_num {
            color: white;
          }

          .mission_address {
            margin: 5px 0 0 5px;
          }

          .mission_info {
            .mission_info_item {
              margin: 10px 0 0 0;
              justify-content: center;
              align-items: flex-end;
              flex: 1;

              .mission_info_icon {
                width: 24px;
                height: 24px;
              }

              .mission_info_title {
                margin-left: 4px;
                margin-bottom: 2px;
              }

              .mission_info_num {
                font-size: 14px;
                color: white;
                margin-left: 4px;
                margin-bottom: 2px;
              }
            }
          }
        }

        .mission_working {
          background: $bg-color-green;
        }

        .mission_selected {
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }

    .item2 {
      margin: 0 10px;
      border-top: rgba(112, 128, 144, 0.8) 1.5px solid;
      font-size: 12px;
      color: white;
      text-align: start;

      .single_line {
        overflow: hidden;
        /* 超出一行文字自动隐藏 */
        text-overflow: ellipsis;
        /*文字隐藏后添加省略号*/
        white-space: nowrap;
        /*强制不换行*/
      }

      .num {
        font-size: 14px;
      }

      .title {
        flex: 1;
        text-align: start;
        font-size: 16px;
        color: $text-color-blue;
      }

      .rule_wrap {
        background: rgba(24, 99, 135, 0.6);
        margin-top: 10px;
        padding: 10px 4px 0 4px;

        .rule_type {
          font-size: 12px;
          line-height: 14px;
          color: white;
        }

        .rule_div {
          margin: 0 5px;
          color: #b5b5b5;
        }

        .rule_text {
          height: 10px;
          line-height: 10px;
          color: $text-color-grey;
        }
      }
    }

    .order_type {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      padding: 15px;

      ::v-deep .el-input__icon {
        margin-top: 5px;
        //line-height: ;
      }

      .order_item {
        cursor: pointer;

        .order_text {
          height: 20px;
          line-height: 20px;
          color: #b5b5b5;
          font-size: 14px;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.el-tooltip__popper.is-dark {
  background-color: rgba(0, 0, 0, 0.6) !important;
}
</style>
